<template>
    <div class="login-view">
        <a-card class="login">
            <div class="login-item">
                <a-row>
                    <a-col :span="3">
                        <a-avatar :size="30" :src="logo0Src" style="color: #40a9ff;"></a-avatar>
                    </a-col>
                    <a-col :span="20" style="text-align: right;">
                        <a-typography-title :level="3" style="color: #40a9ff;">{{ title }}</a-typography-title>
                    </a-col>
                </a-row>
            </div>

            <div class="login-form">
                <slot></slot>
            </div>
        </a-card>
    </div>
    <img class="logo" :src="logoSrc" />
</template>
<script lang="ts" setup>
import { defineProps } from "vue";

import logo0Src from '@/assets/logo/logo.png'
import logoSrc from '@/assets/logo/logo1.png'


/**
 * 参数
*/
interface IProps {
    /**
     * 请求地址
    */
    title: string;
}

const props = defineProps<IProps>();


</script>
<style scoped>
.logo {
    position: absolute;
    top: 40px;
    left: 20px;
    height: 60px;
}
.login-view {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    background-color: #d8e6ff;
    position: relative;
}

.login-view::after {
    position: absolute;
    width: 487px;
    height: 412px;
    content: "";
    background-image: url(../../assets/login-bg-l.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
}

.login-view::before {
    position: absolute;
    width: 487px;
    height: 412px;
    content: "";
    background-image: url(../../assets/login-bg-r.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    right: 0;
}

.login {
    width: 460px;
    border-radius: 2px;
    position: relative;
    z-index: 99;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08),
        0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04);
}
.login-item {
    margin-bottom: 10px;
}
</style>
